<template>
  <div>
    <Row>
      <Col span="24">
        <Card class="margin-bottom-10">
          <Form inline>
            <FormItem class="margin-bottom-0">
              <Select v-model="searchConf.platform" filterable remote :remote-method="getGameName" style="width:260px"
                      placeholder='请选择平台' :loading="nameLoading">
                <Option v-for="item in platformList" :value="item.id" :key="item.id">{{ item.title }}</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.openid" :clearable="true" style="width:260px" placeholder="请输入openid" />
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.mobile" :clearable="true" style="width:260px" placeholder="请输入手机号" />
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.account" :clearable="true" style="width:260px" placeholder="请输入账号" />
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Select v-model="searchConf.is_verify" filterable style="width:160px" :clearable="true" placeholder='请选择实名'>
                <Option value="0">未实名</Option>
                <Option value="1">已实名</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row style="margin-top: 15px">
      <Col span="24">
        <Card>
          <div class="margin-bottom-15">
            <Button type="primary" v-has="'Word/add'" @click="alertAdd" icon="md-add">{{ $t('add_button') }}</Button>
          </div>
          <div>
            <Table :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover />
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize"
                  @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total />
          </div>
        </Card>
      </Col>
    </Row>
    <!-- <Modal v-model="modalSetting.show" width="368" :styles="{top: '30px'}" @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert" />
        <span>新增玩家</span>
      </p>
      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="100">
        <FormItem label="openid">
          <Input v-model="formItem.openid"  style="width: 80%" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" class="margin-right-10">取消</Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal> -->
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert" />
        <span>{{ formItem.id ? '编辑' : '新增' }}绑定账户</span>
      </p>
      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
        <FormItem label="所属平台" prop="platform">
          <Select v-model="formItem.platform" placeholder="请选择所属平台" style="width:200px">
            <Option v-for="item in platformList" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
        </FormItem>
        <FormItem label="账号" prop="account">
          <Input v-model="formItem.account" placeholder="绑定手机号时无需填写" :disabled="formItem.id > 0 ? true : false" />
        </FormItem>
        <FormItem label="openid" prop="openid">
          <Input v-model="formItem.openid" placeholder="请输入openid，必填" :disabled="formItem.id > 0 ? true : false" />
        </FormItem>
        <FormItem label="手机号" prop="mobile">
          <Input v-model="formItem.mobile" placeholder="请输入绑定手机号" />
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input v-model="formItem.password" placeholder="不填代表不重置密码/只能修改账号不为空的绑定记录/会同时修改该OPENID对应密码" />
        </FormItem>
        <FormItem label="状态" prop="审核状态">
          <Select v-model="formItem.status" placeholder="请选择审核状态" style="width:200px">
            <Option v-for="item in statusList" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
          <br>
          <span>注：审核状态只影响YZTT开头的openid账号（即新玩家），无法影响老玩家</span>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" class="margin-right-10">取消</Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getList, edit, add } from '@/api/game-account'
import { getChoose } from '@/api/game-platform'
const editButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.edit) {
    return h('Button', {
      props: {
        type: 'primary'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          getChoose()
          vm.formItem.id = currentRow.id
          vm.formItem.openid = currentRow.openid
          vm.formItem.account = currentRow.account
          vm.formItem.mobile = currentRow.mobile
          vm.formItem.platform = currentRow.platform
          vm.formItem.status = currentRow.status
          vm.formItem.password = ''
          vm.modalSetting.show = true
          vm.modalSetting.index = index
        }
      }
    }, vm.$t('edit_button'))
  }
}
export default {
  name: 'operate-order',
  data () {
    return {
      nameLoading: false,
      gameNameOption: [],
      gameShow: {},
      columnsList: [
        {
          title: '序号',
          type: 'index',
          width: 65,
          align: 'center'
        },
        {
          title: '平台',
          align: 'center',
          render: (h, params) => {
            if (params.row.platform === 1) {
              return h('span', '微信')
            } else if (params.row.platform === 2) {
              return h('span', '抖音')
            }
          },
          width: 200
        },
        {
          title: '账号',
          align: 'center',
          key: 'account',
          tooltip: true,
          minWidth: 130
        },
        {
          title: '手机号',
          align: 'center',
          key: 'mobile',
          tooltip: true,
          minWidth: 130
        },
        {
          title: 'openid',
          align: 'center',
          key: 'openid',
          tooltip: true,
          minWidth: 130
        },
        {
          title: '实名',
          align: 'center',
          minWidth: 90,
          render: (h, params) => {
            if (params.row.verify_id === 0) {
              return h('span', '未实名')
            } else {
              return h('span', '已实名')
            }
          }
        },
        {
          title: '状态',
          align: 'center',
          minWidth: 90,
          render: (h, params) => {
            if (params.row.status === 0) {
              return h('span', '等待审核')
            } else if (params.row.status === 1) {
              return h('span', '正常')
            } else if (params.row.status === 2) {
              return h('span', '封禁')
            } else if (params.row.status === 3) {
              return h('span', '待审核')
            } else if (params.row.status === 4) {
              return h('span', '审核拒绝')
            }
          }
        },
        {
          title: '绑定时间',
          align: 'center',
          key: 'created_at',
          tooltip: true,
          minWidth: 130
        },
        {
          title: '操作',
          align: 'center',
          width: 280,
          render: (h, params) => {
            return h('div', [
              editButton(this, h, params.row, params.index)
            ])
          }
        }
      ],
      tableData: [],
      platformList: [],
      statusList: [
        {
          id: 1,
          title: '正常'
        },
        {
          id: 2,
          title: '封禁'
        },
        {
          id: 3,
          title: '待审核'
        },
        {
          id: 4,
          title: '审核拒绝'
        }
      ],
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        platform: '',
        account: '',
        openid: '',
        mobile: '',
        is_verify: ''
      },
      formItem: {
        id: 0,
        openid: '',
        platform: '',
        password: '',
        mobile: ''
      },
      modalSetting: {
        show: false,
        pub: false,
        loading: false,
        version: false,
        index: 0
      },
      platformShow: {},
      buttonShow: {
        del: true,
        edit: true
      },
      listLoading: false,
      total: {},
      userInfo: {}
    }
  },
  created () {
    let vm = this
    vm.getList()
    vm.getChoose()
    vm.hasRule('Account/del').then(res => {
      vm.buttonShow.del = res
    })
    vm.hasRule('Account/edit').then(res => {
      vm.buttonShow.edit = res
    })
  },
  methods: {
    alertAdd () {
      this.modalSetting.show = true
      this.modalSetting.index = 0
    },
    setFormDate: function (time) {
      this.searchConf.date = time
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getList()
    },
    changeSize (size) {
      this.tableShow.pageSize = size
      this.getList()
    },
    search () {
      this.tableShow.currentPage = 1
      this.getList()
    },
    // submit () {
    //   let vm = this
    //   this.$refs['myForm'].validate((valid) => {
    //     if (valid) {
    //       vm.modalSetting.loading = true
    //       addSpecial(vm.formItem).then(response => {
    //         vm.$Message.success(response.data.msg)
    //         vm.getList()
    //         vm.cancel()
    //         vm.clearForm()
    //       }).catch(() => {
    //         vm.modalSetting.loading = false
    //       })
    //     }
    //   })
    // },
    cancel () {
      this.modalSetting.show = false
      this.clearForm()
    },
    doCancel (data) {
      if (!data) {
        this.formItem.id = 0
        this.$refs['myForm'].resetFields()
        this.clearForm()
        this.modalSetting.loading = false
        this.modalSetting.index = 0
      }
    },
    clearForm () {
      let vm = this
      vm.formItem.openid = ''
      vm.formItem.mobile = ''
      vm.formItem.platform = ''
      vm.formItem.status = ''
    },
    getChoose () {
      let vm = this
      getChoose().then(chooseRes => {
        vm.platformList = chooseRes.data.data.list
        vm.platformList.forEach(item => {
          vm.platformShow[item.id] = item.title
        })
      })
    },
    submit () {
      let vm = this
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          vm.modalSetting.loading = true
          if (vm.formItem.id === 0) {
            add(vm.formItem).then(response => {
              vm.$Message.success(response.data.msg)
              vm.getList()
              vm.cancel()
            }).catch(() => {
              vm.modalSetting.loading = false
            })
          } else {
            edit(vm.formItem).then(response => {
              vm.$Message.success(response.data.msg)
              vm.getList()
              vm.cancel()
            }).catch(() => {
              vm.modalSetting.loading = false
            })
          }
        }
      })
    },
    getList () {
      let vm = this
      let params = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        ...vm.searchConf
      }
      vm.listLoading = true
      getList(params).then(response => {
        vm.tableData = response.data.data.list
        vm.total = response.data.data.total
        if (response.data.data.userInfo) {
          vm.userInfo = response.data.data.userInfo
        }
        vm.tableShow.listCount = response.data.data.count
        vm.listLoading = false
      })
    }
  }
}
</script>
